<template>
    <el-dialog v-model="selectWlProDialog" title="物料产品选择" width="70%" @close="handleClose">

        <div class="manage-index">
            <el-form :inline="true" :model="params">
                <el-form-item label="设备编码">
                    <el-input v-model="params.deviceNo" placeholder="请输入设备编码"></el-input>
                </el-form-item>
                <el-form-item label="设备名称">
                    <el-input v-model="params.deviceName" placeholder="请输入设备名称"></el-input>
                </el-form-item>
                <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
                <el-button type="primary" plain @click="paramsReset" :icon="Refresh">重置</el-button>
            </el-form>
            <el-table style="width: 100%" :data="salesorder" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column prop="deviceNo" label="设备编码" width="120"></el-table-column>
                <el-table-column prop="deviceName" label="设备名称" width="120"></el-table-column>
                <el-table-column prop="brand" label="品牌" width="120"></el-table-column>
                <el-table-column prop="specificationModel" label="规格型号" width="120"></el-table-column>
                <el-table-column prop="workshop.workshopName" label="所属车间" width="120"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="120"></el-table-column>
                <el-table-column prop="deviceStatus" label="状态" width="120"></el-table-column>
            </el-table>

            <!-- 分页组件 -->
            <el-row>
                <el-col :span="24">
                    <div class="demo-pagination-block">
                        <el-pagination v-model:current-page="params.currentPage" v-model:page-size="params.pageSize"
                            background :default-page-size="params.pageSize" :page-sizes="pageSizes"
                            layout="total,sizes,prev,pager,next,jumper" :total="pageResult.total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
            <!-- 分页组件结束 -->
        </div>
    </el-dialog>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { finddeviceLedger, deletedeviceLedger, updatedeviceLedger, insertdeviceLedger, getspotInspectionfind } from '@/apis/zs';
import { findWorkshop } from '@/apis/zyj/workshop'; // 确保这一行导入是有效的
import { Search, Refresh, Delete, Plus, Edit } from '@element-plus/icons-vue';

// 控制弹窗显示状态
const visible = ref(false);
const title = ref('');
const ids = ref([]);
const deleteDisabled = ref(true);
const pageResult = ref({});
const pageSizes = [2, 5, 8, 10];
const salesorder = ref([]);
const form = ref({
    deviceNo: '',
    deviceName: '',
    deviceTypeId: '',
    workshopId: '',
    brand: '',
    specificationModel: '',
    remark: ''
});
const deviceCategories = ref([]);
const workshops = ref([]);

// 初始化查询参数
const params = ref({
    currentPage: 1,
    pageSize: 5,
    deviceNo: '',
    deviceName: ''
});

// 查询设备数据
const handleSearch = async () => {
    try {
        const response = await finddeviceLedger(params.value);
        pageResult.value = response;
        salesorder.value = response.records; // 更新表格数据
    } catch (error) {
        ElMessage.error('设备查询失败');
        console.error('设备查询失败:', error);
    }
};


// 提交表单
const onSubmit = async () => {
    try {
        if (title.value === '新增设备') {
            await insertdeviceLedger(form.value);
        } else if (title.value === '修改设备') {
            await updatedeviceLedger(form.value);
        }
        visible.value = false;
        ElMessage.success(`${title.value}成功`);
        await handleSearch();
    } catch (error) {
        ElMessage.error(`${title.value}失败`);
        console.error(`${title.value}失败:`, error);
    }
};
// 处理选择变化
const handleSelectionChange = (val) => {
    deleteDisabled.value = !val.length;
    ids.value = val.map(item => item.deviceNo); // 获取选中行的 ID 数组
};

// 关闭弹窗
const handleClose = () => {
    visible.value = false;
};

// 重置查询条件
const paramsReset = () => {
    params.value = {
        currentPage: 1,
        pageSize: 5,
        deviceNo: '',
        deviceName: ''
    };
    handleSearch();
};

// 初始化加载数据
onMounted(async () => {
    await loadDeviceCategories();
    await loadWorkshops();
    await handleSearch();
});
</script>

<style scoped>
.demo-pagination-block {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>
